<style scoped lang="scss">
.buffet_box{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .order_operation{
    margin-bottom: 40px;
  }
  .people_num{
    //height: 60px;
    line-height: 60px;
    width:400px;
    margin-bottom:40px;
    ::v-deep{
      .el-input__inner{
        height: 60px;
        border: 1px solid #E5E5E5;
        font-size: 24px;
        font-weight: bold;
      }
      .el-input-number__decrease{
        width: 60px;
        height: 58px;
        font-size: 22px;
        color: #606266;
      }
      .el-input-number__increase{
        width: 60px;
        height: 58px;
        font-size: 22px;
        color: #606266;
      }
    }
  }
  .money_amount{
    margin-bottom: 40px;
    .label—text{
      font-size: 22px;
      color: #1a1a1a;
    }
    .amount_text{
      font-size: 40px;
      color: #FF3B36;
      font-weight: bolder;
    }
  }
  .buffet-button {
    border-color: #dddddd;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    width: 200px;
    height: 60px;
    border-radius: 30px;
    text-align: center;
    line-height: 42px;
    font-size: 16px;
  }
}
</style>


<template>
  <div class="buffet_box">
    <div class="order_operation">
      <template v-for="item in todayBuffet">
      <el-button class="buffet-button"
                 @click="changeBuffetTab(item)"
                 v-if="item.status==='启用'"
                 :style="{ color: orderForm.buffet.type === item.type ? '#fff' : '#000', backgroundColor: orderForm.buffet.type ===item.type? '#1E90FF' : '#fff',}"
      >{{item.type}}</el-button>
      </template>
    </div>
    <el-input-number class="people_num" v-model="orderForm.buffetCount" @change="numChange" :min="1" :step="1" ></el-input-number>
    <div class="money_amount">
      <span class="label—text">
        合计金额：
      </span>
      <span class="amount_text">
        {{orderForm.price | currency }}
      </span>
    </div>
    <div style="display: flex;flex-flow: row;align-items: center;justify-content: center">
      <el-button class="buffet-button" type="primary" style="width: 200px;font-size: 22px;margin-right: 10px" @click="submitOrder()" >一键下单</el-button>
      <el-button class="buffet-button" type="primary" plain style="width: 200px;font-size: 22px;margin-left: 10px" @click="openOrder()" >查看订单</el-button>
    </div>
  </div>
</template>

<script>
import {createOrder, getTodayBuffet} from "@/api/shop/order";
import VueCurrencyFilter from 'vue-currency-filter'
export default {
  name: "buffet",
  data(){
    return{
      orderForm:{
        payerId:'',
        type:'buffet',
        buffetCount:'',
        price:0,
        buffet:{},
      },
      todayBuffet:[]
    }
  },
  props:{
    currentUser:{
      type:Number,
      default:null,
    }
  },
  created() {
    this.getTodayBuffet()
  },
  methods:{
    //查看订单
    openOrder(){
      this.$router.push({
        path:'/order/book/buffet/',
        query:{
          type:'buffet'
        }
      })
    },
    //提交订单
    submitOrder(){
      if(!this.currentUser){
        this.$message.error('请选择就餐人')
        return
      }
      if(!this.currentUser){
        this.$message.error('请选择就餐人')
        return
      }
      if(this.orderForm.price<=0){
        this.$message.error('当前订单合计金额为0元')
        return
      }
      this.$confirm('请确认是否提交').then(()=>{
        this.orderForm.payerId=this.currentUser
        createOrder(this.orderForm).then(res=>{
          this.$message.success('下单成功')
          this.orderForm={
            payerId:null,
            buffetCount:1,
            type:'buffet',
            buffet:{},
          }
          this.$emit('closeUser')
          this.getTodayBuffet()
          // this.changeBuffetTab(this.todayBuffet.find(item=>item.status==='启用'))
        })
      })
    },
    //选择早餐/午餐
    changeBuffetTab(buffet){
      this.orderForm.buffet=buffet
      // this.orderForm.type=buffet.type
      // this.orderForm.buffet.price=null
      this.numChange()
    },
    //选择就餐人数
    numChange(){
      this.orderForm.price=this.orderForm.buffetCount * (this.orderForm.buffet.price || 0)
    },
    //获取自助餐单
    getTodayBuffet(){
      getTodayBuffet().then(res=>{
        this.todayBuffet=res.data
        if(this.todayBuffet.length>0){
          this.changeBuffetTab(this.todayBuffet.find(item=>item.status==='启用'))
        }
      })
    }
  },
}
</script>

